import React, { useEffect } from 'react';

export default function FlowCustomer({ tel, onClose }) {
  useEffect(() => {
    window.document.body.style.overflow = 'hidden';
  }, []);

  function handleClose() {
    window.document.body.style.overflow = '';
    onClose();
  }

  function handleConfirm() {
    handleClose();
    if (tel) {
      window.open('tel://' + tel);
    }
  }
  return (
    <div className="flow-customer">
      <div className="mask" onClick={handleClose} />
      <div className="center">
        <div className="title">订单咨询</div>
        {!!tel && <div className="tel">{tel}</div>}
        <div></div>
        <div className="btn-block">
          <div className="btn cancel" onClick={handleClose}>
            取消
          </div>
          <div className="btn confirm" onClick={handleConfirm}>
            {tel ? '呼叫' : '联系客服'}
          </div>
        </div>
      </div>
    </div>
  );
}
